// (function() {
//     // canvas ʵ�� watermark
//     function __canvasWM({
//         // ����μ� https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters
//         container = document.body,
//         width = '400px',
//         height = '300px',
//         textAlign = 'center',
//         textBaseline = 'middle',
//         font = "20px Microsoft Yahei",
//         fillStyle = 'rgba(17, 17, 17, 0.50)',
//         content = '�����⴫',
//         rotate = '30',
//         zIndex = 2147483647
//     } = {}) {
//         const args = arguments[0];
//         const canvas = document.createElement('canvas');
//         canvas.setAttribute('width', width);
//         canvas.setAttribute('height', height);
//         const ctx = canvas.getContext("2d");
//         ctx.textAlign = textAlign;
//         ctx.textBaseline = textBaseline;
//         ctx.font = font;
//         ctx.fillStyle = fillStyle;
//         ctx.rotate(Math.PI / 180 * rotate);
//         var lines = content.split('\n');
//         // console.log(lines);


//         for (var i = 0; i < lines.length; i++) {
//             ctx.fillText(lines[i], 150, 30 + (i * 25));
//         }
//         //ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);

//         // eslint-disable-next-line no-redeclare
//         for (var i = 0; i < lines.length; i++) {
//             ctx.fillText(lines[i], 150, 30 + (i * 25));
//         }
//         //ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);

//         // eslint-disable-next-line no-redeclare
//         for (var i = 0; i < lines.length; i++) {
//             ctx.fillText(lines[i], 150, 150 + (i * 25));
//         }
//         ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);
//         // ctx.fillText('originDu, 150, 0');
//         const base64Url = canvas.toDataURL();
//         const __wm = document.querySelector('.__wm');

//         const watermarkDiv = __wm || document.createElement("div");
//         const styleStr = `
//           position:absolute;
//           top:0;
//           left:0;
//           width:100%;
//           height:100%;
//           z-index:${zIndex};
//           opacity: 0.2;
//           pointer-events:none;
//           background-repeat:repeat;
//           background-image:url('${base64Url}')`;
//         watermarkDiv.setAttribute('style', styleStr);
//         watermarkDiv.classList.add('__wm');
//         if (!__wm) {
//             container.style.position = 'relative';
//             container.insertBefore(watermarkDiv, container.firstChild);
//         }

//         const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
//         if (MutationObserver) {
//             let mo = new MutationObserver(function() {
//                 const __wm = document.querySelector('.__wm');
//                 if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {

//                     mo.disconnect();
//                     mo = null;
//                     __canvasWM(JSON.parse(JSON.stringify(args)));
//                 }
//             });
//             mo.observe(container, {
//                 attributes: true,
//                 subtree: true,
//                 childList: true
//             })
//         }
//     }
//     if (typeof module != 'undefined' && module.exports) { //CMD
//         module.exports = __canvasWM;
//         // eslint-disable-next-line no-undef
//     } else if (typeof define == 'function' && define.amd) { // AMD
//         // eslint-disable-next-line no-undef
//         define(function() {
//             return __canvasWM;
//         });
//     } else {
//         window.__canvasWM = __canvasWM;
//     }
// })();
// // eslint-disable-next-line no-undef
// export default __canvasWM
let watermark = {}
let id = '1.23452384164.123412416';
let text = "默认";
let timeId = null;
let setWatermark = (str) => {


    if (document.getElementById(id) !== null) {
        document.body.removeChild(document.getElementById(id));
    }

    //创建一个画布
    let can = document.createElement('canvas');
    //设置画布的长宽
    can.width = 220;
    can.height = 320;

    let cans = can.getContext('2d');
    //旋转角度
    cans.rotate(-15 * Math.PI / 180);
    cans.font = '18px Vedana';
    //设置填充绘画的颜色、渐变或者模式
    cans.fillStyle = 'rgba(200, 200, 200, 0.40)';
    //设置文本内容的当前对齐方式
    cans.textAlign = 'left';
    //设置在绘制文本时使用的当前文本基线
    cans.textBaseline = 'Middle';
    //在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
    cans.fillText(str, can.width / 10, can.height / 2);
    // cans.fillText(str, 3, 30);

    let div = document.createElement('div');
    div.id = id;
    div.style.pointerEvents = 'none';
    div.style.top = '120px';
    div.style.left = '200px';
    div.style.position = 'fixed';
    div.style.zIndex = '100000';
    div.style.width = document.documentElement.clientWidth + 'px';
    // div.style.height = document.documentElement.clientHeight + 'px';
    div.style.height = '500px';
    div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
    document.body.appendChild(div);
    return id;
}
const config = {
    // childList: true,
    attributes: true,
    // characterData: true,
    subtree: true,
    attributeFilter: ["class", "style"]
        // attributeOldValue: true,
        // characterDataOldValue: true
};
const mutationCallback = (mutationList) => {

    for (const mutation of mutationList) {
        const type = mutation.type;
        switch (type) {
            case "childList":
                // id = setWatermark(str);
                // console.log("节点被删除或添加");
                break;
            case "attributes":
                setWatermark(text);
                console.log(`${mutation.attributeName}属性修改了`);
                break;
            case "subtree":
                // console.log("子树被修改");
                break;
            default:
                break;
        }
    }
};
const observer = new MutationObserver(mutationCallback);

// 该方法只允许调用一次
watermark.set = (str) => {
    text = str;
    let id = setWatermark(text);
    // 禁止删除
    timeId = setInterval(() => {
        if (document.getElementById(id) === null) {
            id = setWatermark(text);
        }
    }, 500);

    // 开始监控目标节点
    observer.observe(document.body, config);

    window.onresize = () => {
        setWatermark(text);
    };
}

// 关闭水印
watermark.close = () => {
    clearInterval(timeId)
    const parent = document.body;
    const child = document.getElementById(id);
    if (child != null) {
        parent.removeChild(child);
    }
    observer.disconnect()
}




export default watermark;